<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas {
				border: 1px, solid;
				background-color: lightblue;
				background-size: cover;
			}
		</style>
	</head>
	<canvas id="MyCanvas" width="1500px" height="800px"></canvas>

	<script type="text/javascript">
		var canvas = document.getElementById("MyCanvas");
		var pen = canvas.getContext("2d");

		var l = 200;
		var h = 200;
		var lch = 10;
		var hch = 10;
		var angle = 0;
		setInterval(function() {
			pen.clearRect(0,0,2000,1000);
			
			l = l + lch;
			h = h + hch;
			angle = angle + 30;

			var x = Math.cos(angle / 180 * Math.PI) * 100;
			var y = Math.sin(angle / 180 * Math.PI) * 100;
			
			pen.beginPath();
			pen.fillStyle = "black";
			pen.arc(l, h, 200, (angle / 180) * Math.PI, (angle / 180 + 1) * Math.PI);
			pen.fill();

			pen.beginPath();
			pen.fillStyle = "white";
			pen.arc(l, h, 200, (angle / 180) * Math.PI, (angle / 180 + 1) * Math.PI, true);
			pen.fill();

			pen.beginPath();
			pen.fillStyle = "white";
			pen.arc(l + x, h + y ,100, 0, 2 * Math.PI);
			pen.fill();
			pen.beginPath();
			pen.fillStyle = "black";
			pen.arc(l - x, h - y, 100, 0, 2 * Math.PI);
			pen.fill();
			pen.beginPath();
			pen.fillStyle = "black";
			pen.arc(l + x, h + y, 30, 0, 2 * Math.PI);
			pen.fill();

			pen.beginPath();
			pen.fillStyle = "white";
			pen.arc(l - x, h - y,  30, 0, 2 * Math.PI);
			pen.fill();
			if(l >= 1300){
				lch = -20;
			}
			if(l <= 100){
				lch = 20;
			}
           if(h >= 700){
				hch = -20;
			}
			if(h <= 100){
				hch = 20;
			}
			
		}, 100);
	</script>

	<body>
	</body>

</html>